<!--
 * @Author: your name
 * @Date: 2022-01-10 09:20:28
 * @LastEditTime: 2022-03-30 14:58:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lpc\ias_ui\src\views\coi\commodityLibrary\components\searchHead.vue
-->
<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />&nbsp;搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :inline="true" size="mini" label-width="130px">
            <el-form-item label="UPC(不含检验码)">
              <el-input v-model="searchData.skuList" type="textarea" placeholder="请输入UPC(不含检验码)，多个回车换行隔开" clearable style="width: 200px;" />
            </el-form-item>
            <!-- <el-form-item label="任务类型"> -->
            <el-form-item label="渠道">
              <el-select v-model="searchData.channelId" style="width: 200px;" placeholder="请选择" clearable>
                <el-option
                  v-for="item in taskTypes"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="发起人">
              <el-input v-model.trim="searchData.createdBy" placeholder="请输入发起人ID" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item label="发起时间">
              <el-date-picker
                v-model="searchData.time"
                style="width: 200px;"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model.trim="searchData.skuName" placeholder="请输入商品名称" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchData.mainStatusList" multiple style="width: 200px;" placeholder="请选择状态" clearable>
                <el-option
                  v-for="item in commodityTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="修改内容">
              <el-select v-model="searchData.operationCode" style="width: 200px;" placeholder="请选择" clearable>
                <el-option
                  v-for="item in operationCodes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button id="searchBtn" size="mini" type="primary" icon="el-icon-search" round @click="$emit('search')">查询</el-button>
              <el-button id="resetBtn" size="mini" type="primary" icon="el-icon-refresh" round @click="$emit('reset')">重置</el-button>
              <!-- <el-button size="mini" icon="el-icon-download" type="primary" round @click="$emit('download')">导出</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { commodityTypes, operationCodes } from '@/views/coi/commonJs/dictionary'
import { findChannelInfos } from '@/api/coi/onlineTaskAPI/sku'

export default {
  name: 'CommodityLibrarySearchHead',
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      commodityTypes,
      taskTypes: [],
      operationCodes,
      activeName: '1'
    }
  },
  created() {
    findChannelInfos().then(res => {
      if (res) {
        this.taskTypes = res.result
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding-bottom: 8px;
}
/deep/ .el-form-item{
  margin-right: 0;
}
</style>
